import './styles/index.scss'
import { classNames } from 'shared/lib/classNames/classNames'
import { Header } from 'widgets/Header'
import { Suspense, useState } from 'react'
import { useTheme } from './providers/themeProvider'
import { AppRouter } from './providers/router'
import { Navigation } from 'widgets/Navigation/UI/Navigation'
import { isMobile } from 'shared/lib/isMobile/isMobile'

export const App = () => {
    const { theme } = useTheme()

    const [navigationCollapsed, setNavigationCollapsed] = useState(true)

    const handleNavigationToggle = () => {
        setNavigationCollapsed((state) => !state)
    }

    return (
        <div className={classNames('app', {}, [theme])}>
            <Suspense fallback="">
                <Header isMobile={isMobile()} navigationStateSetter={handleNavigationToggle} />
                <div className="content-page">
                    <Navigation state={navigationCollapsed} navigationStateSetter={handleNavigationToggle}/>
                    <AppRouter />
                </div>
            </Suspense>
        </div>
    )
}
